import { Component, Emit, Prop, Watch } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import IconDefault from '@/assets/customer/icon-default.png'
import type { CompanyInfoDto, CompanyProductInfoDto, GroupInfoDto, PayWageInfoDto, WesureInfoDto } from '@/api/company/types'
import { Button, Col, Image, Row, Tag, Tooltip } from 'ant-design-vue'
import {  CaretDownOutlined, RightOutlined } from '@ant-design/icons-vue'
import { CompanyAuditStatusCnEnum } from '@/const/enum'
import { CompanyAuditStatusColorMap } from '@/const/colorMap'

interface BasicInfoDto {
    [key: string]: BasicInfoItemDto
}
interface BasicInfoItemDto {
    label: string
    value: string | number | null | undefined
    prefix?: string
    suffix?: string
    event?: () => void
}

@Component
export class BasicInfoView extends Render {
    @Prop() groupInfo!: GroupInfoDto
    @Prop() companyProductInfo!: CompanyProductInfoDto

    showManageProduct = false
    showAccount = false
    showEdit = false
    showDetail = false

    get basicInfo () {
        return [ {
            label: '账户余额',
            value: this.groupInfo.wesureBalance ?? '--',
            prefix: '￥',
            suffix: '',
        },
        {
            label: '案件总数',
            value: '',
            prefix: '',
            suffix: '',
        },
        {
            label: '理赔率',
            value: this.groupInfo.insureClaimRate ?? '--',
            prefix: '',
            suffix: '',
        },
        ] as BasicInfoItemDto[]
    }

    // @Watch('paywageInfo')
    // handleWatchCompanyBasicInfo() {
    //     console.log(444, this.paywageInfo)
    // }

    @Emit('refresh')
    handleRefresh() {}

    renderItem(name: string, content: string | null | undefined) {
        return (
            <div>
                <div class="text-sm text-black-300 mb-10px">{name}</div>
                <div>{content ?? '--'}</div>
            </div>
        )
    }

    render() {
        return (
            <>
                <div class="">
                    <div class="flex items-center w-full">
                        <Image width={60} height={60} src={IconDefault}></Image>
                        <div class="ml-16px flex-1">
                            <div class="flex items-center justify-between">
                                <div class="flex items-center">
                                    <div class="text-18px font-bold mr-16px">
                                        {this.companyProductInfo.companyName}
                                    </div>
                                    <Tag color={CompanyAuditStatusColorMap[this.companyProductInfo.auditStatus as keyof typeof CompanyAuditStatusColorMap]}>
                                        {CompanyAuditStatusCnEnum[this.companyProductInfo.auditStatus]}
                                    </Tag>
                                </div>
                                <div class="flex items-center">
                                    <Tooltip
                                        placement="bottom"
                                        v-slots={{
                                            default: () => {
                                                return (
                                                    <div class="flex px-5px py-1px rounded-sm border border-solid border-border-color-100 items-center text-black-300 cursor-pointer">
                                                        <span class="mr-5px">更多设置</span>
                                                        <CaretDownOutlined />
                                                    </div>
                                                )
                                            },
                                            title: () => {
                                                return (
                                                    <div class="leading-loose p-5px text-center">
                                                        <div class="cursor-pointer">开通产品</div>
                                                        <div class="cursor-pointer">充值账户</div>
                                                        <div class="cursor-pointer">编辑资料</div>
                                                        <div class="cursor-pointer">产品管理</div>
                                                        <div class="cursor-pointer">禁用账户</div>
                                                        <div class="cursor-pointer">导出</div>
                                                    </div>
                                                )
                                            }
                                        }}
                                    ></Tooltip>
                                    <Button class="ml-12px" type="primary" size="small">
                                        返回
                                    </Button>
                                </div>
                            </div>
                            <div class="text-base text-black-300 mt-8px">{this.companyProductInfo.customerNo}</div>
                        </div>
                    </div>
                    <div class="mt-20px pt-20px border-t-1 border-t-solid border-t-border-color-100">
                        <Row>
                            {Object.values(this.basicInfo).map((i) => {
                                return (
                                    <Col sm={24} md={4}>
                                        <div onClick={i?.event}>
                                            <div class="flex text-black-300">
                                                <span>{i.label}</span>
                                            </div>
                                            <div class="text-black-100 font-bold text-xl mt-12px">
                                                {i.value || i.value === 0 ? 
                                                    <div>
                                                        {i.prefix}{i.value}{i.suffix}
                                                    </div>: <span></span>
                                                } 
                                            </div>
                                        </div>
                                    </Col>
                                )
                            })}
                        </Row>
                    </div>
                </div>
            </>
        )
    }
}

export default toNative<
    { groupInfo: GroupInfoDto, companyProductInfo: CompanyProductInfoDto },
    {
        refresh: () => void
            }
            >(BasicInfoView)
